<template>
  <div class="bigbox">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img class="banner" src="../assets/images/images/index_banner2.jpg" alt />
      </van-swipe-item>
      <van-swipe-item>
        <img class="banner" src="../assets/images/images/index_banner1.jpg" alt />
      </van-swipe-item>
      <van-swipe-item>
        <img class="banner" src="../assets/images/images/index_banner3.jpg" alt />
      </van-swipe-item>
    </van-swipe>
    <div class="xitong boxs">
      <div class="title">
        <span class="iconfont icon-zhanghu"></span>
        <span>产品身份系统中心</span>
      </div>
      <div class="input">
        <input type="text" placeholder="请输入身份识别码！" v-model="Code" />
        <span class="iconfont icon-saoyisao" @click="WxscanQRCode"></span>
      </div>
      <div class="btn" @click="search">立刻查询</div>
      <div class="line"></div>
      <div class="tishi">
        <span class="iconfont icon-warning"></span>
        每个防伪码只能被查询3次，超出即是失效！
      </div>
      <div class="tishi">
        Each anti-counterfeiting code can only be queried 3 times, beyond that
        is invalid!!!
      </div>
    </div>
    <div class="fangwei">防伪系统由深圳市鸿运源数码科技有限公司提供</div>
  </div>
</template>

<script>
import wx from "weixin-js-sdk";

export default {
  name: "App",
  data() {
    return {
      Code: "",
    };
  },
  created: function () {
    this.IsWeixin();
  },
  mounted: function () { },
  methods: {
    search() {
      this.$router.push({ name: "homes", params: { code: this.Code } });
    },
    IsWeixin() {
      var ua = navigator.userAgent.toLowerCase();
      var isWeixin = ua.indexOf("micromessenger") != -1;
      if (!isWeixin) {
        document.head.innerHTML =
          '<title>抱歉，出错了</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/open/libs/weui/0.4.1/weui.css">';
        document.body.innerHTML =
          '<div class="weui_msg"><div class="weui_icon_area"><i class="weui_icon_info weui_icon_msg"></i></div><div class="weui_text_area"><h4 class="weui_msg_title">请在微信客户端打开链接</h4></div></div>';
      } else if (!localStorage.getItem("Token")) {
        localStorage.setItem("jump", location.href);
        this.$router.push({ name: "login" });
      } else {
        this.wxconfig();
      }
    },
    wxconfig() {
      let _this = this;
      this.$api.get(
        "api/Code/GetJsApiInfo",
        { url: location.href.split("#")[0] },
        (r) => {
          wx.config({
            debug: false, // 开启调试模式,
            appId: r.DATA.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
            timestamp: r.DATA.timestamp, // 必填，生成签名的时间戳
            nonceStr: r.DATA.nonceStr, // 必填，生成签名的随机串
            signature: r.DATA.signature, // 必填，签名，见附录1
            jsApiList: ["scanQRCode"], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          });
        },
        (f) => { }
      );
    },
    WxscanQRCode() {
      var _this = this;
      wx.scanQRCode({
        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
        success: function (res) {
          var _str = _this.getQueryString(
            res.resultStr.split("?")[1],
            "EncryptCode"
          );
          try {
            _this.$router.push({
              name: "homes",
              params: {
                EncryptCode: _str,
              },
            });
          } catch (e) { }
        },
      });
    },
    getQueryString(resultStr, name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = resultStr.match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped >
.fangwei {
  color: rgba(187, 187, 187, 0.5);
  text-align: center;
  margin: 0.2rem 0 0.5rem 0;
}

.tishi {
  color: #ca3a3a;
  font-size: 0.28rem;
  line-height: 0.5rem;
}

.line {
  border-bottom: 1px solid rgba(187, 187, 187, 0.5);
  margin-top: 0.8rem;
  margin-bottom: 0.5rem;
}

.btn {
  font-size: 0.3rem;
  width: 5rem;
  margin: 0 auto;
  text-align: center;
  background: #1a6bfb;
  color: white;
  line-height: 0.65rem;
  border-radius: 0.1rem;
  margin-top: 0.5rem;
}

.input {
  font-size: 0.3rem;
  padding: 0.14rem;
  border: none;
  border: solid 1px #bbbbbb;
  border-radius: 0.2rem;
  margin: 0 auto;
  margin-top: 1.5rem;
  display: block;
  width: 4rem;
  position: relative;

  input {
    border: none;
    width: 100%;
    height: 100%;
  }

  span {
    position: absolute;
    right: 0.2rem;
    top: 0.16rem;
    z-index: 99999;
  }
}

.boxs {
  margin-top: 0.2rem;
  background: white;
  position: fixed;
  top: 6rem;
  width: 7rem;
  box-shadow: 0px 0.02rem 0.1rem 0px rgba(0, 0, 0, 0.4);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3rem;
  box-sizing: border-box;
}

.bigbox {
  font-size: 0.2rem;
  width: 100%;
  margin: 0 auto;

  .banner {
    width: 100%;
  }

  .xitong {
    padding-bottom: 0.8rem;
    margin-top: -3rem;

    .quan {
      width: 2rem;
      height: 2rem;
      background: #59b968;
      color: white;
      border-radius: 50%;
      line-height: 2rem;
      text-align: center;
      font-size: 1.4rem;
      margin: 0 auto;
      margin-top: 0.8rem;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
    }
  }
}

.title2 {
  padding-bottom: 0.3rem;
  margin-top: 0.7rem;
  border-bottom: 0.01rem solid rgba(187, 187, 187, 0.51);
}

.title {
  line-height: 0.45rem;
  overflow: hidden;

  span {
    display: block;
    float: left;
  }

  span:nth-child(1) {
    font-size: 0.45rem;
    color: rgb(26, 107, 251);
  }

  span:nth-child(2) {
    font-size: 0.3rem;
    color: #333333;
    margin-left: 0.12rem;
  }
}
</style>
